#app {
  width: 100%;
  height: 100%;
  //主容器的全局样式
  .xiaobu-container {
    width: 100%;
    min-height: calc(100vh - #{$LayoutHeaderHeight} - #{$LayoutTagsHeight});
    min-width: 888px;
    padding: 16px;
    background: #f2f2f2;
    //搜索条件
    .search-form {
      background: #fff;
      padding: 16px;
      padding-bottom: 0;
      margin-bottom: 20px;
      border-radius: 4px;

      .el-form-item {
        margin-right: 0 !important;

        &.search-field {
          display: flex;
          position: relative;
          .content-label {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            right: calc(100% + 12px);
            width: 106px;
            line-height: 18px;
            text-align: right;
            background: #fff;
            color: #606266;
            &.three {
              width: 45px;
            }
            &.four {
              width: 60px;
            }
            &.five {
              width: 80px;
            }
            &.six {
              width: 90px;
            }
            &.required::after {
              content: "*";
              position: absolute;
              right: 100%;
              top: 0;
              line-height: 18px;
              color: #f56c6c;
            }
          }

          .el-form-item__label {
            width: 128px;
            flex-shrink: 0;
          }

          .el-form-item__content {
            flex-grow: 1;

            .el-select,
            .el-date-editor,
            .el-cascader {
              width: 100%;

              .el-input__icon.el-range__icon.el-icon-date {
                margin-left: -10px;
              }

              .el-input__icon.el-range__close-icon {
                margin-right: -5px;
              }

              .el-range-separator {
                width: 14px;
                padding: 0;
              }
            }
          }
        }
      }
    }

    // 表格部分
    .table-wrap {
      background: #fff;
      border-radius: 4px;
      padding: 16px 0;

      //功能按钮
      .table-control-box {
        padding: 0 16px;
        .el-button {
          margin-bottom: 12px;
          & + .el-button {
            margin-left: 12px;
            &.fr {
              margin-left: 0;
              margin-right: 12px;
            }
          }
        }
      }

      .table-box {
        width: 100%;
        padding: 0 16px;
        .el-table {
          width: 100%;
          &.empty {
            &::after {
              content: "暂无数据";
              position: absolute;
              top: 50%;
              left: 50%;
              transform: translate3d(-50%, 50%, 0);
              color: #909399;
            }
            // 无数据时 右侧滚动条被盖住 无法滚动
            .el-table__fixed-right {
              height: calc(100% - 16px) !important; //设置高优先，以覆盖内联样式
            }
            // 设置表格无数据时高度
            .el-table__empty-block {
              height: 128px !important;
            }
          }
          // 解决表格右侧设置 fixed时  有时候最后一行fixed的内容显示不全的问题
          .el-table__body-wrapper {
            &.is-scrolling-none {
              & + .el-table__fixed-right {
                height: 100% !important; //设置高优先，以覆盖内联样式
              }
            }
          }

          .el-dropdown-link.more {
            color: #409eff;
            cursor: pointer;
          }

          .goods-info-right {
            align-items: flex-start;
            .link {
              color: #409eff;
              cursor: pointer;
            }
          }

          .goods-info-left {
            margin-right: 12px;
          }
        }

        .pagination-container {
          padding: 0 16px;
          margin-top: 12px;
        }
      }
    }

    //弹框部分
    .xiaobu-form-dialog {
      .el-dialog {
        .el-dialog__body {
          width: 100%;
          padding: 0;
          &:after {
            visibility: hidden;
            display: block;
            font-size: 0;
            content: " ";
            clear: both;
            height: 0;
          }
          .edit-box {
            position: absolute;
            top: 12px;
            right: 44px;
          }
          .el-dialog-body-child {
            width: 100%;
            min-height: 300px;
            max-height: 60vh;
            padding: 12px 24px;
            overflow-y: auto;

            .tips-icon {
              font-size: 24px;
              margin-left: 12px;
              color: $mainColor;
            }

            .el-form {
              .el-form-item {
                float: left;
                min-height: 40px; // 修复部分高度没到40px排列错误问题
                &.all {
                  width: 100%;
                }
                &.half {
                  width: 50%;
                }
                &.order,
                &.switch {
                  .el-form-item__content {
                    height: 40px !important;
                  }
                }
                .el-form-item__content {
                  position: relative;
                  .get-code {
                    position: absolute;
                    top: 0;
                    right: 0;
                    padding: 0 6px;
                    font-size: 16px;
                    color: #409eff;
                    line-height: 40px;
                    cursor: pointer;
                    z-index: 9;
                    background: transparent;
                    border: none;
                    height: 40px;
                    text-align: right;
                    min-width: unset;
                    & + .el-input {
                      .el-input__inner {
                        padding-right: 178px;
                      }
                      .el-input__suffix {
                        right: 148px;
                        line-height: 48px;
                      }
                    }
                  }
                  .el-input,
                  .el-input-number,
                  .el-switch {
                    height: 40px !important;
                  }
                  .content-label {
                    position: absolute;
                    right: calc(100% + 12px);
                    width: 106px;
                    line-height: 18px;
                    text-align: right;
                    background: #fff;
                    color: #606266;
                    &.one-line {
                      line-height: 40px;
                      &.required::after {
                        top: 50%;
                        transform: translateY(-50%);
                      }
                    }
                    &.three {
                      width: 46px;
                    }
                    &.four {
                      width: 60px;
                    }
                    &.five {
                      width: 74px;
                    }
                    &.six {
                      width: 90px;
                    }
                    &.required::after {
                      content: "*";
                      position: absolute;
                      right: 100%;
                      top: 0;
                      line-height: 18px;
                      color: #f56c6c;
                    }
                  }
                  .el-select,
                  .el-cascader,
                  .el-date-editor {
                    width: 100%;
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}

//侧边栏展开时 搜索条件样式
.openSidebar {
  @media screen and (max-width: 1500px) {
    .el-form.search-form .el-form-item.search-field {
      width: 50%;
    }
  }

  @media screen and (min-width: 1500px) and (max-width: 1800px) {
    .el-form.search-form .el-form-item.search-field {
      width: 33.3%;
    }
  }

  @media screen and (min-width: 1800px) {
    .el-form.search-form .el-form-item.search-field {
      width: 25%;
    }
  }
}

//侧边栏收起时 搜索条件样式
.hideSidebar {
  @media screen and (max-width: 1300px) {
    .el-form.search-form .el-form-item.search-field {
      width: 50%;
    }
  }

  @media screen and (min-width: 1300px) and (max-width: 1600px) {
    .el-form.search-form .el-form-item.search-field {
      width: 33.3%;
    }
  }

  @media screen and (min-width: 1600px) {
    .el-form.search-form .el-form-item.search-field {
      width: 25%;
    }
  }
}
